<template>
    <div id="app">
        <count :num="num" @add="addFun"></count>
        <div v-for="(item,ind) in list" :key="ind" class="classify">
            <h1>{{item.Subject}}</h1>
            <div class="list">
                <dl-item v-for="(dlItem,index) in item.Content" :key="index"
                      :label="dlItem.Label" :border="item.Layout"
                ></dl-item>
            </div>
        </div>
    </div>
</template>

<script>
import dlItem from './components/dl-item'
import count from './components/count'
import axios from 'axios'
import './assets/common.css'

export default {
    name: 'App',
    components: {
        dlItem,
        count
    },
    data(){
        return {
            list:[],
            num:1
        }
    },  
    created(){
        axios.get('/api/list').then((res) => {
            console.log(res);
            if(res.data.code === 1){
                this.list = res.data.data
            }
        })
    },
    methods:{
        addFun(num){
            this.num = num;
        }
    }
}
</script>

<style lang="scss">
    html,body{
        width:100%;
        height: 100%;
        overflow: hidden;
    }
    #app{
        width:100%;
        height: 100%;
        overflow: scroll; 
    }
    .classify{
        h1{
            font-size:16px;
            color:red;
        }
    }
    .list{
        width:100%;
        display: flex;
        flex-wrap: wrap;
    }
</style>
